require('./PageVersionmanmobile.styl');
import { Control } from 'react-keeper';
// import Mypdfviewer from 'components/mypdfviewer'
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const Search = require('components/search')
const MonitorList = require('components/monitorlist');
const ui = require('clientConfig/util/jsapi/ui');
const classNames = require("classnames");
var list_data = {};//存储每一路径的文件数据信息
class Versionmanmobile extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isHide: false,
            listData: [],
            data: [],
            file: '',
            currentType: 0 //0 搜索项目名称， 1 搜索项目编号
            // listData: [{
            //     name: "IT项目管理信息系统.docx",
            //     date:"2017-09-18",
            //     url: 'http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8'//http://www.w3school.com.cn/i/movie.ogg
            // }]

        };
        this.searchRange = ["文件名称"];
        this.crumbs = [];
        this.handleChangeSearchType = this.handleChangeSearchType.bind(this);
    }
    onsearch(keyword) {
        this.setState({
            keyword: keyword
        })
        if (keyword != undefined) {
            var props = {
                pageSize: 10,
            }
            if (!!this.state.currentType) {//全为数字的是项目编号
                props.proj_num = keyword
                Actions.search(0, props)
            } else {
                props.proj_name = keyword
                Actions.search(0, props)
            }
        }
    }
    onexit() {//退出搜索
        this.setState({
            keyword: "",
            data: []
        })
    }
    //滑动列表项点击回调
    callback(index) {
        let file_id = this.state.listData[index].url;
        let cur_folder_id = this.state.listData[index].folder_id;
        if (this.state.listData[index].folder) {
            if (list_data.hasOwnProperty(cur_folder_id)) {
                this.crumbs.push({ pathname: this.state.listData[index].fileName, folder_id: cur_folder_id });
                this.setState({ listData: list_data[cur_folder_id] });
            } else {
                Actions.fetch({ folder_id: this.state.listData[index].folder_id, pathname: this.state.listData[index].fileName }, this.cb);
            }
        } else {
            if (this.state.listData[index].fileName.includes(".pdf")) {
                this.setState({ file: file_id, has: true })
            } else {
                let file_id = this.state.listData[index].url;
                Actions.download({ file_id })
            }
        }
    }
    handleChangeSearchType(currentType) {
        this.setState({ currentType })
    }
    //是否隐藏滑动列表
    hideCallBack(isHide) {
        this.setState({ isHide: isHide });
    }
    render() {
        let t = this;
        return (
            <div className="versionmanmobile">
                <Search onsearch={this.onsearch.bind(this)} searchRange={this.searchRange} data={this.state.data}
                    file={true} onExit={this.onexit.bind(this)} callback={this.callback.bind(this)} currentType={t.state.currentType} handleChangeSearchType={this.handleChangeSearchType} />
                {/* {this.state.file && <Mypdfviewer file={this.state.file} />} */}
                {!this.state.has &&
                    <MonitorList
                        ref='monitorList'
                        listdata={this.state.listData}
                        callback={this.callback.bind(this)}
                    />}
            </div>
        );
    }

    componentWillMount() {
        ui.setTitle({ title: Control.state.proj_name });
    }

    componentDidMount() {
        let proj_name = Control.state.proj_name;
        let folder_id = Control.state.folder_id;
        let cb = (pathname, folder_id, data) => {
            list_data[folder_id] = data;
            this.crumbs.push({ pathname, folder_id });
            ui.setTitle({ title: pathname });
        }
        this.cb = cb;

        Actions.fetch({ proj_name, folder_id, pathname: proj_name }, cb);
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            if (isSuccessed) {
                if (this.crumbs.length > 0) {
                    this.crumbs.splice(this.crumbs.length - 1, 1);
                    if (this.crumbs.length == 0) {
                        Control.go(-1);
                        return;
                    }
                    this.setState({ listData: list_data[this.crumbs[this.crumbs.length - 1].folder_id] }, () => {
                        ui.setTitle({ title: this.crumbs[this.crumbs.length - 1].pathname });
                        // console.log(this.state.listData);
                        // console.log(this.crumbs);
                        // debugger
                    })
                }

            }
        })
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            if (isSuccessed) {
                Control.go(-1);
            }
        })
    }
}

reactMixin.onClass(Versionmanmobile, Reflux.connect(Store));

module.exports = Versionmanmobile;
